<html>
	<head>
		<title>Hsiao-CropUpload插件</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<script src="../../dist/jquery.min.js"></script>
		<link href="../../dist/ext/Jcrop/Jcrop.min.css" rel="stylesheet">
		<link href="./common.css" rel="stylesheet">
		<script src="../../dist/ext/Jcrop/Jcrop.min.js"></script>
		<script src="../../dist/jquery.cropupload.js"></script>
	</head>
	<body>
		<h1>裁剪头像并上传</h1>
		<div class="example">
			<div class="upload"></div>
			<div class="UploadButton"><button class="startUpload">手动上传</button></div>
		</div>
		
		<script>
			var bounds;
			$('.upload').cropupload({
				url : 'http://127.0.0.1/Hsiao-CropUpload/upload.php',
				autoload : false,	//如果preview = true，autoload设置无效
				preview : true,
				eachThread : false,
				fileType : 'jpg,png,gif,bmp',
				progress : function(e){
					if(e.progress==100){
						$('#fileQueue-'+e.key+' .process_layout').remove();
						$('#fileQueue-'+e.key+' .process_box').remove();
						$('#fileQueue-'+e.key).prepend('<div class="check"><img src="./check.png" /></div>');
					}
				},
				success : function(res){
					console.log("上传成功");
					console.log(res);
				},
				crop : {
					/* 这部分参数参照Jcrop官方文档 */
					options : {
						aspectRatio: 1,		//选框宽高比。说明：width/height
						allowMove:true,		//允许选框移动
						allowResize:true,	//允许选框缩放
						minSize:[50,50],	//选框最小尺寸
						setSelect: [0,0,100,100],	//设置预选框
						boxWidth:500
					},
					callback : function(e,s,c){
						bounds = c;
						console.log('四边参数:');
						console.log(c);
					}
				},
				onSelect : function(file){
					$('.cp_fileSelect').hide();
					$('.UploadButton').show();
				},
				beforeUpload : function(){
					$('.upload').trigger('setData',{
						x:bounds.x,
						y:bounds.y,
						w:bounds.w,
						h:bounds.h
					});
				}
			});
			
			$('.startUpload').click(function(){
				$('.upload').trigger('startUpload');
			});
		</script>
	</body>
</html>